<template>
  <div class="app-container">
    <el-form :inline="true" :model="keyword" ref="searchForm" class="demo-form-inline">
      <el-form-item label="会员ID" >
        <el-input size="small" clearable v-model="keyword.memberId" placeholder="会员ID"></el-input>
      </el-form-item>

      <el-form-item label="手机号" >
        <el-input size="small" clearable v-model="keyword.phone" placeholder="手机号"></el-input>
      </el-form-item>
      <el-form-item label="卡券ID" >
        <el-input size="small" clearable v-model="keyword.cardId" placeholder="卡券ID"></el-input>
      </el-form-item>
      <el-form-item label="状态" >
        <el-select v-model="keyword.status" placeholder="状态">
          <el-option label="启用" value="启用"></el-option>
          <el-option label="禁用" value="禁用"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" size="small" @click="searchEmp()" icon="el-icon-search">查询</el-button>
        <el-button type="primary" plain size="small" @click="resetSearchForm('searchForm')" icon="el-icon-refresh">重置</el-button>
      </el-form-item>
      <el-button type="primary" size="small" @click="add" icon="el-icon-plus" style="float: right">新增卡券</el-button>
    </el-form>

    <el-table
      :data="unitList"
      v-loading="listLoading"
      element-loading-text="Loading"
      border
      fit
      highlight-current-row
      stripe
      style="width: 100% ">
      <el-table-column prop="saleNumber" label="流水号" width="180"></el-table-column>
      <el-table-column prop="memberId" label="会员id" width="80"></el-table-column>
      <el-table-column prop="phone" label="手机号"></el-table-column>
      <el-table-column prop="memberName" label="会员名称"></el-table-column>
      <el-table-column prop="cardType" label="卡券类型">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.cardType==1">优惠券</el-tag>
          <el-tag type="warning" effect="dark" v-if="scope.row.cardType==2">储值卡</el-tag>
          <el-tag type="danger" effect="dark" v-if="scope.row.cardType==3">计次卡</el-tag>
        </template>
      </el-table-column>
      <el-table-column prop="cardName" label="卡券名称"></el-table-column>
      <el-table-column prop="belongingStoreName" label="所属店铺"></el-table-column>
      <el-table-column prop="money" label="核销金额"></el-table-column>
      <el-table-column prop="remark" label="备注"></el-table-column>
      <el-table-column prop="salePeople" label="核销人"></el-table-column>
      <el-table-column prop="saleTime" label="核销时间"></el-table-column>
      <el-table-column prop="status" label="状态">
        <template slot-scope="scope">
          <el-tag type="success" effect="dark" v-if="scope.row.status == '启用'">启用</el-tag>
          <el-tag type="warning" effect="dark" v-if="scope.row.status == '禁用'">禁用</el-tag>
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
        </template>
      </el-table-column>
    </el-table>
    <el-pagination
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="currentPage"
      :page-sizes="[5, 10, 15, 20]"
      :page-size="pageSize"
      layout="total, sizes, prev, pager, next, jumper"
      :total="total">
    </el-pagination>

    <el-dialog title="添加核销" :visible.sync="dialogFormVisible">
      <el-form :model="form">
        <el-form-item label="流水号" :label-width="formLabelWidth" >
          <el-input v-model="form.saleNumber" autocomplete="off" readonly />
        </el-form-item>
        <el-form-item label="会员ID" :label-width="formLabelWidth" >
          <el-select v-model="form.memberId" placeholder="请选择会员ID" @change="findMember">
            <el-option
              v-for="list in memberList"
              :key="list.memberId"
              :label="list.memberId"
              :value="list.memberId" />
          </el-select>
        </el-form-item>
        <el-form-item label="会员名称" :label-width="formLabelWidth">
          <el-input v-model="form.memberName" autocomplete="off"></el-input>
        </el-form-item>

        <el-form-item label="手机号" :label-width="formLabelWidth">
          <el-input v-model="form.phone" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="卡券名称" :label-width="formLabelWidth">
          <el-select v-model="form.cardId" placeholder="请选择卡券名称" @visible-change="findCard">
            <el-option
              v-for="list in cardList"
              :key="list.cardId"
              :label="list.cardName"
              :value="list.cardId"/>
          </el-select>
        </el-form-item>

        <el-form-item label="所属店铺" :label-width="formLabelWidth">
          <el-select v-model="form.belongingStoreId" placeholder="请选择所属店铺" @visible-change="findShop">
            <el-option
              v-for="list in shopList"
              :key="list.belongingStoreId"
              :label="list.name"
              :value="list.belongingStoreId"/>
          </el-select>
        </el-form-item>
        <el-form-item label="状态" :label-width="formLabelWidth">
          <el-select v-model="form.status" placeholder="状态">
            <el-option label="启用" value="启用"></el-option>
            <el-option label="禁用" value="禁用"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="核销金额" :label-width="formLabelWidth">
          <el-input v-model="form.money" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="备注" :label-width="formLabelWidth">
          <el-input v-model="form.remark" autocomplete="off"></el-input>
        </el-form-item>
        <el-form-item label="核销人" :label-width="formLabelWidth">
          <el-input v-model="form.salePeople" autocomplete="off"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="commitSaleAdd">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
// 导入api/unit.js中定义接口
import { sueCouponPage, delById, addSale, findMemberAll, byId, findAllCard, findAllShop } from '@/api/sueCoupon'

export default {
  filters: {
    statusFilter(status) {
      const statusMap = {
        published: 'success',
        draft: 'gray',
        deleted: 'danger'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      unitList: [],
      cardList: [], // 查询卡券返回的集合
      memberList: [], // 查询会员返回的集合
      shopList: [], // 查询店铺返回的集合
      listLoading: true,
      dialogFormVisible: false,
      dialogUpdateVisible: false,
      form: {
        saleNumber: '',
        memberId: '',
        phone: '',
        memberName: '',
        cardType: '',
        cardName: '',
        belongingStoreName: '',
        belongingStoreId: '',
        money: '',
        remark: '',
        salePeople: '',
        saleTime: '',
        status: ''
      },
      keyword: {
        cardId: '',
        memberId: '',
        phone: '',
        status: null
      },
      formLabelWidth: '120px',
      currentPage: 1,
      total: 0,
      pageSize: 5,
      dialogExcelVisible: false
    }
  },
  created() {
    this.fetchData()
  },
  methods: {
    fetchData() {
      this.listLoading = true
      sueCouponPage({
        pageNum: this.currentPage,
        pageSize: this.pageSize,
        cardId: this.keyword.cardId,
        memberId: this.keyword.memberId,
        phone: this.keyword.phone,
        status: this.keyword.status

      }).then((response) => {
        // console.log(response)
        this.unitList = response.data.list
        this.total = response.data.total
        this.listLoading = false
      })
    },
    searchEmp() {
      this.fetchData()
    },
    // 添加
    commitSaleAdd() {
      addSale(this.form).then((response) => {
        // console.log('打印添加的回调', response)
        if (response.code == 200) {
          this.dialogFormVisible = false
          this.fetchData()
        }
      })
    },
    // 点击添加按钮触发
    add() {
      // 生成随机数
      var randomInt = Math.floor(Math.random() * Math.pow(10, 18))
      this.form.saleNumber = randomInt + ''
      // 调用查询member全部
      findMemberAll().then((response) => {
        // console.log('打印---->', response)
        this.memberList = response.data
      })
      this.dialogFormVisible = true
    },
    // 事件触发函数（查询member对象）
    findMember() {
      byId({ memberId: this.form.memberId }).then((response) => {
        console.log('打印---->', response)
        this.form.phone = response.data.phone
        this.form.memberName = response.data.name
      })
    },
    // 事件触发函数（查询card所有返回数组）
    findCard() {
      findAllCard().then((response) => {
        this.cardList = response.data
      })
    },
    // 事件触发函数（查询shop所有返回数组）云鹏后端接口
    findShop() {
      findAllShop().then((response) => {
        this.shopList = response.data
      })
    },
    handleDelete(index, row) {
      console.log(row.saleId)
      this.$confirm('此操作将永久删除该记录, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          delById({ saleId: row.saleId }).then((response) => {
            this.$message({
              type: 'success',
              message: '删除成功!'
            })
            this.fetchData()
          })
        })
        .catch(() => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          })
        })
    },
    // 每页显示的记录数发生变化触发的操作
    handleSizeChange(val) {
      // console.log(`每页 ${val} 条`);
      this.pageSize = val
      this.fetchData()
    },
    // 当前页发生变化触发的操作
    handleCurrentChange(val) {
      // console.log(`当前页: ${val}`);
      this.currentPage = val
      this.fetchData()
    },
    // 重置
    resetSearchForm() {
      this.keyword.cardId = ''
      this.keyword.memberId = ''
      this.keyword.phone = ''
      this.keyword.status = ''
      this.fetchData()
    }

  }

}
</script>
